<template>
  <div class="container">
      <Form style="width: 400px;">
        <FormItem>
            <Input type="textarea" v-model="location" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入位置信息"/>
        </FormItem>
        <FormItem>
            <Button type="info" @click="onSelect" style="margin-right: 10px;">地理查询</Button>
        </FormItem>
    </Form>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import request from '@/utils/request'
import config from '@/utils/config'
export default Vue.extend({
    data() {
        return {
            loading: false,
            location: '',
        }
    },
    methods: {
      onSelect() {
        if ( !config.tk) {
          console.error('未配置密钥')
          return
        }
        const params = {
          ds: `{"keyWord":"${this.location}"}`,
          tk: config.tk,
        }
        this.loading = true
        // eslint-disable-next-line
        request.get('/geocoder', params).then((data: any) => {
          this.loading = false
          if (!data || !data.location) {
            return
          }
          const { lat, lon: lng } = data.location
          const latlng = { lat, lng }
          this.$emit('getLatlng', { latlng })
        })
      },
    },
})
</script>
<style lang="scss" scoped>
.container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 699;
    background: #ffffff;
    div {
        text-align: left;
        line-height: 30px;
    }
    border: 1px solid #999;
    border-radius: 8px;
    padding: 10px;
}
</style>
